<template>
  <div class="da">

    <div class="box">
      <div class="header">
        <van-search v-model="value" show-action label="地址" placeholder="请输入搜索关键词" @search="onSearch">
          <template #action>
            <div @click="onClickButton">搜索</div>
          </template>
        </van-search>
      </div>
      <div class="meddle">
        <dl>
          <dt><img src="./assets/1.jpg" alt=""></dt>
          <dd>啊啊大大大阿达</dd>
        </dl>
        <dl>
          <dt><img src="./assets/1.jpg" alt=""></dt>
          <dd>啊啊大大大阿达</dd>
        </dl>
      </div>
    </div>
    <div class="footer">
      <router-view>
        <van-tabbar route>
          <van-tabbar-item replace to="/search" icon="home-o" @click="one">标签</van-tabbar-item>
          <van-tabbar-item replace to="/search" icon="search">标签</van-tabbar-item>
          <van-tabbar-item replace to="/home" icon="shopping-cart-o">购物</van-tabbar-item>
          <van-tabbar-item replace to="/search" icon="friends-o">我的</van-tabbar-item>
        </van-tabbar>
      </router-view>

    </div>
  </div>
</template>
<script setup>
const active = ref(1);
import { ref } from 'vue';

</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
  list-style: none;
}

.da {
  width: 100%;
  height: 100%;
}

.da {
  overflow: auto;
  flex-direction: column;
}

.box {
  display: flex;
  overflow: auto;
  flex-direction: column;
}

.meddle {
  height: 50px;
  // display: flex;
}

.footer {
  height: 50px;
}
.dl img{
  width: 200px;
  height: 200px;
  .van-tabbar-item{
    color: red;
  }
}
</style>
